<script lang="ts" setup>

import {Search, Plus, Delete, Edit} from "@element-plus/icons-vue";
import {onMounted, reactive, ref} from "vue";
import {post} from "@/net/index.js";
import {ElMessage, ElMessageBox} from "element-plus";

const searchModel = reactive({
  name: '',
  type: '',
  accountId: ''
})
const tif = reactive({
  id: '',
  name: '',
  type: '',
  uploadTime: '',
  accountId: '',
  info: ''
})

const editForm = reactive({
  id: '',
  name: '',
  type: '',
  info: ''
})
const formLabelWidth = ref('130px')
const dialogFormVisible = ref(false)
const title = ref('')
function openEditUI(row){
  if(row === null){
    title.value = '新增图片信息'
  }else{
    title.value = '编辑图片信息'
    editForm.id = row.id
    editForm.name = row.name
    editForm.type = row.type
    editForm.info = row.info
  }
  dialogFormVisible.value = true
}
function addTif(){
  clearFrom()
  post('/api/auth/tif/add',{...editForm}, ()=>{
    getTifList(undefined)
    ElMessage({
      type: 'success',
      message: '添加数据成功'
    })
    clearFrom()
  })
}
function saveTif() {
  if(title.value === '新增数据'){
    addTif()
    dialogFormVisible.value = false
  }else{
    updateTif()
    dialogFormVisible.value = false
  }
}
function updateTif(){
  post('/api/auth/tif/update',{...editForm}, ()=>{
    getTifList(undefined)
    ElMessage({
      type: 'success',
      message: '修改数据成功'
    })
    clearFrom()
  })
}
function clearFrom(){
  editForm.id = ''
  editForm.name = ''
  editForm.type = ''
  editForm.info = ''
}

const tifList = ref([])
function getTifList(searchModel){
  post(`/api/auth/tif/list`, {
    ...searchModel
  },(data) => {
    tifList.value = data.tifList
  })
}
function getTifListByNameOrTypeOrAccountId(){
  console.log(searchModel)
  post(`/api/auth/tif/list`, {...searchModel},(data) => {
    tifList.value = data.tifList
  })
}
function deleteTif(row){
  ElMessageBox.confirm(
      '您确定删除' + row.name + '?' ,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  )
      .then(() => {
        tif.id = row.id;
        console.log(row)
        post('/api/auth/tif/delete',{...tif}, ()=>{
          getTifList(undefined)
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
          tif.id = ''
        })
      }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除'
    })
  })
}
onMounted(() => {
  getTifList(undefined)
})


import type { UploadProps, UploadUserFile } from 'element-plus'
const url = 'http://localhost:8080/api/auth/upload'
const fileList = ref<UploadUserFile[]>([

])

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (file) => {
  console.log(file)
}
function uploadFileSuccess(response, file, fileList) {
  console.log(response.code);
}
const dialogFormVisible2 = ref(false)
function openEditUI2(){
  dialogFormVisible2.value = true
}


const downloadUrl = 'http://localhost:8080/api/auth/download/'

</script>

<template>
  <div style="margin-top: 50px; margin-left: 200px; padding: 10px">
    <el-card  id="search">
      <el-row >
        <el-col :span="20">
          <el-input v-model="searchModel.name"  placeholder="名称" />
          <el-input v-model="searchModel.type"  placeholder="类型" />
          <el-input v-model="searchModel.accountId"  placeholder="用户（id）" />
          <el-button type="primary" round @click="getTifListByNameOrTypeOrAccountId" ><el-icon><Search /></el-icon>查询</el-button>
        </el-col>
        <el-col :span="4" align="right">
          <el-button type="primary" circle @click="openEditUI2"><el-icon><Plus /></el-icon></el-button>

        </el-col>
      </el-row>
    </el-card>
    <!--    结果列表-->
    <el-card>
      <el-table :data="tifList" stripe style="width: 100%">
        <el-table-column type="index" label="#" width="80" />
        <el-table-column prop="id" label="数据ID" width="80" />
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="type" label="数据类别" width="80" />
        <el-table-column prop="uploadTime" label="上传时间" width="300" />
        <el-table-column prop="accountId" label="上传者（id）" />
        <el-table-column label="图片"  >
          <template #default="scope1">
            <el-image style="width: 100px; height: 100px" :src="downloadUrl+ scope1.row.name">
            </el-image>
          </template>

        </el-table-column>
        <el-table-column prop="info" label="备注" />
        <el-table-column align="center" label="操作" width="180">
          <template #default="scope">
            <el-button type="primary" @click="openEditUI(scope.row)" :icon="Edit" circle />
            <el-button type="danger" @click="deleteTif(scope.row)" :icon="Delete" circle />
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 用户信息编辑对话框 -->
    <el-dialog :title="title"  v-model="dialogFormVisible" >
      <el-form :model="editForm" >
        <el-form-item label="名称" :label-width="formLabelWidth" >
          <el-input style="width: 80%;"  v-model="editForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth" >
          <el-input  v-model="editForm.type" autocomplete="off"></el-input>
        </el-form-item>
        <div style="margin-top: 20px">
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input v-model="editForm.info" autocomplete="off"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button @click="saveTif" type="primary">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="上传图片"  v-model="dialogFormVisible2" >
      <el-upload
          v-model:file-list="fileList"
          class="upload-demo"
          :action="url"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-success="uploadFileSuccess"
          list-type="picture-card"
      >
        <el-icon><Plus /></el-icon>
<!--        <template #tip>-->
<!--          <div class="el-upload__tip">-->
<!--            jpg/png files with a size less than 500kb-->
<!--          </div>-->
<!--        </template>-->
      </el-upload>
    </el-dialog>
  </div>

</template>

<style scoped>
#search .el-input {
  width: 200px;
  margin-right: 10px;;
}
.el-dialog .el-input{
  width: 80%;
}
</style>